<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动物搜索界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 引入Layui的CSS文件 -->
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <form class="layui-form" style="margin-top: 30px;">
                <div class="layui-form-item layui-form-inline">
                    <div class="layui-input-inline">
                        <select name="range" lay-filter="range">
                            <option value="animal_id">动物ID</option>
                            <option value="animal_name">动物名称</option>
                            <option value="animal_type_id">类型ID</option>
                            <option value="stadium_id">场馆ID</option>
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="keyword" required lay-verify="required" placeholder="请输入搜索关键词" autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 搜索结果表格 -->
    <table id="searchResults" lay-filter="searchTable">
        <thead>
            <tr>
                <th lay-data="{field:'animal_id', width:80}"></th>
                <th lay-data="{field:'animal_name', width:120}"></th>
                <th lay-data="{field:'animal_img', width:100, templet: '<img src={{d.animal_img}} height=50>'}"></th>
                <th lay-data="{field:'animal_remark', width:200}"></th>
                <th lay-data="{field:'animal_type_id', width:100}"></th>
                <th lay-data="{field:'stadium_id', width:100}"></th>
				<th lay-data="{field:'操作', width:100}"></th>
            </tr>
        </thead>
    </table>
</div>

<!-- 引入Layui的JavaScript文件 -->
<script src="layui/layui.js"></script>
<script>
layui.use(['form', 'table'], function(){
    var form = layui.form;
    var table = layui.table;

    // 假设的动物数据
    const animals = [
        { animal_id: 1, animal_name: '老虎', animal_img: 'imgs/tiger.jpg', animal_remark: '体型强壮，凶猛', animal_type_id: 1, stadium_id: 1 },
        { animal_id: 2, animal_name: '狮子', animal_img: 'imgs/lion.jpg', animal_remark: '草原之王，威风凛凛', animal_type_id: 1, stadium_id: 2 },
        { animal_id: 3, animal_name: '大象', animal_img: 'imgs/elephant.jpg', animal_remark: '体型庞大，鼻子灵活', animal_type_id: 2, stadium_id: 3 },
        { animal_id: 1, animal_name: '老虎', animal_img: 'imgs/tiger.jpg', animal_remark: '体型强壮，凶猛', animal_type_id: 1, stadium_id: 1 },
        { animal_id: 2, animal_name: '狮子', animal_img: 'imgs/lion.jpg', animal_remark: '草原之王，威风凛凛', animal_type_id: 1, stadium_id: 2 },
        { animal_id: 3, animal_name: '大象', animal_img: 'imgs/elephant.jpg', animal_remark: '体型庞大，鼻子灵活', animal_type_id: 2, stadium_id: 3 },
        { animal_id: 1, animal_name: '老虎', animal_img: 'imgs/tiger.jpg', animal_remark: '体型强壮，凶猛', animal_type_id: 1, stadium_id: 1 },
        { animal_id: 2, animal_name: '狮子', animal_img: 'imgs/lion.jpg', animal_remark: '草原之王，威风凛凛', animal_type_id: 1, stadium_id: 2 },
        { animal_id: 3, animal_name: '大象', animal_img: 'imgs/elephant.jpg', animal_remark: '体型庞大，鼻子灵活', animal_type_id: 2, stadium_id: 3 },
		
        // ... 您提供的动物数据 ...
    ];

    // 渲染表格
    table.render({
        elem: '#searchResults',
        cols: [[
            { field: 'animal_id', title: '动物ID', width: 80 },
            { field: 'animal_name', title: '动物名称', width: 120 },
            { 
                field: 'animal_img', 
                title: '图片', 
                width: 120,
                templet: function(d) {
                    return `<img src="${d.animal_img}" alt="${d.animal_name}图片" class="layui-nav-img">`;
                } 
            },
            { field: 'animal_remark', title: '备注', width: 200 },
            { field: 'animal_type_id', title: '类型ID', width: 100 },
            { field: 'stadium_id', title: '场馆ID', width: 100 },
            { field: '操作', title: '操作', width: 150, templet: function(d){
                return '<td>' +
                    '<a href="animal-add.html" target="mainFrame"><i class="layui-icon layui-icon-delete" style="font-size: 20px; color: #1E9FFF;"></i> </a>' +
                    '<a href="animal-add.html" target="mainFrame"><i class="layui-icon layui-icon-edit" style="font-size: 20px; color: #1E9FFF;"></i> </a>' +
                   '</td>';
				
            }}
        ]],
        data: animals,
        page: true
    });

    // 编辑动物信息
    function editAnimal(animalId) {
        window.open('animal-add.html', 'mainFrame'); // 假设mainFrame是目标iframe的name属性
        // 这里可以添加更多逻辑，比如加载动物信息到编辑表单
    }

    // 删除动物信息
    function deleteAnimal(animalId) {
        layer.confirm('确定要删除这条记录吗？', {icon: 3, title: '提示'}, function(index){
            // 执行删除操作，比如发送AJAX请求到服务器
            layer.close(index);
            // 重新加载表格数据
            table.reload('searchResults');
        });
    }

    // 监听搜索按钮的提交事件
    form.on('submit(search)', function(data){
        var keyword = data.field.keyword;
        var range = data.field.range;
        var filteredData = animals.filter(function(item){
            return item[range].toString().includes(keyword);
        });
        table.reload('searchResults', {data: filteredData});
        return false; // 阻止表单的默认提交行为
    });
});
</script>

</body>
</html>